<template>
  <div id="link">

    <VolunteerTable v-if="hasRight" v-show="store?.currentResume?.resumesVolunteerList?.length > 0"
      :list='store?.currentResume?.resumesVolunteerList' :operatorInfo="operatorInfo"></VolunteerTable>
    <a-collapse @change="handleCollapseChange" style="user-select: none;" v-model:activeKey="activeKey" ghost
      expand-icon-position="end">
        <a-collapse-panel v-show="item?.list.length > 0"  v-for="(item, idx) in collapseList" :key="item.label">
          <template #header>
            <div class="header">
              {{ item.label.slice(0,2)+"环节" }}
              {{ item.abnormalDeleted == 1 ? "(已失效)" : '' }}
            </div>
          </template>
          <template #extra>
            <span style="color: #209EE4;">{{ activeKey.includes(item.label) ? "收起" : '展开' }}</span>
          </template>
          <CollapseBox :class="[item.abnormalDeleted == 1 ? 'filter' : '']" v-for="(el, i) in item.list" :key="i"
            :current="el">
          </CollapseBox>
        <div class="line" ></div>
        </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<script setup lang='ts'>
import { computed, ref, watch } from "vue"
import VolunteerTable from "./VolunteerTable.vue";
import CollapseBox from "./CollapseBox.vue";
import { comStores } from '@/store/common/comStore';
import { assessIndex } from "@/api/application-details/index.ts";
import { message } from "ant-design-vue";
const store = comStores();
const operatorInfo = ref({
})
const getData = async (val) => {
  const data = await assessIndex({ resumeId: val });
  console.log(data, 'data');
  if (data && data.code === '10000') {
    const list: any = []
    data.data.forEach(item => {
      let obj: any = {};
      obj.label = item.process
      obj.list = item.assessList?.map(el => {
        return {
          title: item.process,
          role: item.process == '培训中' ? "" : item.process.slice(0, 2) + "官评价" ,
          operatorInfo: {
            person: el.operator,
            time: el.operatorTime
          },
        
          status: item.process == '培训中' ? "" : (el.result == '通过' || el.result == null) ? 'default' :el.result == '放弃'?"surrender":  'dieOut',
          content: el.assess,
          days:el.days
        }
      })
      list.push(obj)
    })
    collapseList.value = list;
    activeKey.value = list.map(el => { return el.label });
    console.log(activeKey.value,'activeKey.value')
  } else {
    message.error(data.msg)
  }
}

watch(() => store.currentResume.resumeId, (val) => {
  if (val) {
    getData(val)
  }
}, { immediate: true })
watch(() => store.noticeNumber, (val) => {
  getData(store.currentResume.resumeId)
})

const hasRight = computed(() => {
  return !!store.userInFor.userRoleList.find(el => el.roleName == '超管' || el.roleName == '培训官')
})

const collapseList = ref<any>([
])
const activeKey = ref([]);
const handleCollapseChange = () => {
  console.log(activeKey.value)
}
</script>

<style lang="less" scoped>
:deep(:where(.css-dev-only-do-not-override-a3h311).ant-collapse>.ant-collapse-item >.ant-collapse-header .ant-collapse-arrow) {
  color: #209ee4;
}

:deep(:where(.css-dev-only-do-not-override-a3h311).ant-collapse>.ant-collapse-item >.ant-collapse-header) {
  padding-left: 0;
  padding-right: 0;
}

:deep(.ant-collapse-content-box){
  padding:10px 0 !important;
}

:deep(.ant-collapse-header){
  padding:10px 0 !important;
}
:deep(.ant-collapse-header){
  svg{
    color: #209ee4;
  }
}

.header {
  font-weight: 500;
  font-size: 16px;
  color: #333333;
  line-height: 23px;
}

#link {
  padding-top: 13px;
  box-sizing: border-box;

  .line {
    display: none;
    width: 100%;
    height: 1px;
    background-color: rgba(179, 192, 200, 0.3);
    position: relative;
  }
}

.filter {
  filter: grayscale(1);
  text-decoration: line-through;
}
</style>